import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import axios from 'axios'
import {useNavigate} from 'react-router-dom'
import { useAppDispatch } from '../../app/hooks'
import {urlss} from '../../app/stores'
import './index.css'
interface listType {
  title: string,
  pic: number,
  model: string,
  id: string,
  children: childType[]
}
interface childType {
  title: string,
  url: string[]
}
const Text: React.FC = () => {
  const { id } = useParams()
  const navigate=useNavigate()
  const dispatch=useAppDispatch()
  const [item, setItem] = useState<listType>({
    title: '',
    pic: 0,
    model: '',
    id: '',
    children: [{
      title: '',
      url: []
    }]
  })
  const idItems = async () => {
    const resp = await axios.get('/api/id', { params: { id: id } })
    setItem(resp.data.item)
  }
  const naviginClick=(url:string[])=>{
    dispatch(urlss(url))
    navigate('/user')
  }
  useEffect(() => {
    idItems()
  },[])
  return (
    <div className='text'>
      {
        item.children.map((v, i) => {
          return <div key={i} className="item">
            {/* 点击详情页的图片可以跳转到该车系图片列表 */}
            {/* 图片列表分为外观，内饰，空间 */}
            {/* 超过后点第一张展示更多 */}
            <div onClick={()=>naviginClick(v.url)}>{v.title}+{v.url.length}</div>
            {
              v.url.map((item, i) => {
                // 图片列表最多只能展示六张图片
                return <div key={i}>
                  <img src={item} alt="" />
                </div>
              })
            }
          </div>
        })
      }
    </div>
  )
}

export default Text